<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 车友会-相册汇总 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="lijun_gz liuwencong_gz" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
    </head>

    <body class="g-doc">
        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7636" />
        </jsp:include>
        <div class="body">
            <!-- 公共头部 -->
            <%@include file="../common/intf6007.html" %>

            <div class="g-hd">
                <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
                <div class="header-title">
                    <span class="header-title-nav">
                        <a href="${WAPROOT}/">车友会</a> > <a href="${WAPROOT}/${club.clubUrl}/"> ${fn:length(fn:escapeXml(club.name))>8?fn:substring(fn:escapeXml(club.name),0,8):fn:escapeXml(club.name)}${fn:length(fn:escapeXml(club.name))>8?"...":""}</a> > 相册
                    </span>
                </div>
            </div>
            <c:if test="${empty requestScope.pager.resultList}">
                <div class="m-none"><span>  &gt;_&lt; lll</span><p>该车友会还没相册哦~</p></div>
            </c:if>
            <c:if test="${!empty pager.resultList}">
                <div id="albumList">
                    <c:forEach  items="${pager.resultList}" var="data">
                        <div class="m-section">
                            <span class="m-section-mark">${fn:escapeXml(data.name)}</span>
                            <a class="m-section-submark" href="${WAPROOT}/${club.clubUrl}/album/a${data.albumId}-photo/">全部 ></a>
                        </div>
                        <div class="m-piclist">
                            <c:forEach items="${data.photos}" var="p" end="5">   
                                <!-- 每个a直接请保留空格或者换行 -->
                                <a href="${WAPROOT}/${club.clubUrl}/album/a${data.albumId}-${p.photoId}-show"><img src="${p.url160x120}"/></a>
                                </c:forEach>
                        </div>
                    </c:forEach>
                </div>
                <c:if test="${requestScope.isMore}">
                    <div class="moreline" style="margin:10px 3%" onclick="loadMore();" id="loadMore"><a href="javascript:void(0);">点击加载更多</a></div>
                </c:if>
            </c:if>
            <div class="g-footer">
                <!-- 公共底部 -->
                <%@include file="../common/intf5987.html" %>
            </div>
            <script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js" ></script>
            <script type="text/javascript">
                /*满屏功能*/
                function setHeight(){
                    var Jfoot = document.querySelector(".g-footer"),
                    Jbody = document.querySelector(".body");
                    if (!Jfoot || !Jbody){return;}
                    var webHeight = document.documentElement.clientHeight,
                    JbodyHeight = Jbody.clientHeight;
                    if (JbodyHeight < webHeight) {
                        Jbody.style.height = webHeight + "px";
                        Jbody.style.position = "relative";
                        Jfoot.setAttribute("style", "width:100%;position:absolute;bottom:0px;");
                    }else{
                        Jfoot.style.position = "relative";
                    }
                }
                window.onload = function(){
                    setHeight();
                }
                var pageNo = 1;
                var pageSize=  3;
                var albumHtml = "<div class=\"m-section\"><span class=\"m-section-mark\">{name}</span>"
                    +"<a class=\"m-section-submark\" href=\"${WAPROOT}/${club.clubUrl}/album/a{albumId}-photo/\">全部 ></a></div>"
                    +"<div class=\"m-piclist\">{photoHtml}</div>";
                var photoHtml = "<a href=\"{url}\"><img src=\"{photoUrl}\"/></a>";

                function getAlbumPage(pageNo){
                    $.getJSON("${ROOT}/album/getAlbumJsonByClub.do?req_enc=utf-8&resp_enc=utf-8&callback=?", {clubId:${clubId},pageNo:pageNo,pageSize:pageSize}, albumCallBack);
                }
                function albumCallBack(data){
                    if(data.code==0){
                        var result = data.data;
                        var html = "";
                        for(var i=0;i<result.length;i++){
                            var d = result[i];
                            var photos = d.photos;
                            var pHtml =  "";
                            for(var j = 0 ; j<photos.length;j++){
                                pHtml+=photoHtml.replace(/{photoUrl}/ig,photos[j].url160x120).replace(/{url}/ig,"${WAPROOT}/${club.clubUrl}/album/a"+d.albumId+"-"+photos[j].photoId+"-show");
                            }
                            html+=albumHtml.replace(/{name}/ig,d.name).replace(/{photoHtml}/ig,pHtml).replace(/{albumId}/ig,d.albumId);
                        }
                        $("#albumList").append(html);
                        setHeight();
                        pageNo = data.pageNo;
                        if(pageNo==data.pageCount){
                            $("#loadMore").hide();
                        }
                    }
                }
                function loadMore(){
                    getAlbumPage(pageNo+1);
                }
            </script>
        </div>
    </body>
</html>
